import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'
import styles from '../App.module.css'
import { Layout, Menu, Avatar, Dropdown, Space } from 'antd'
import { UserOutlined } from '@ant-design/icons'
const Home = () => {
  const { Header, Content, Sider } = Layout
  const items = [
    // 菜单项务必填写 key
    { label: <NavLink to={'/commonuser'}>普通用户</NavLink>, key: 'item-1' },
    {
      label: <NavLink to={'/trafficuser'}>交管用户</NavLink>,
      key: 'item-2',
    },
  ]
  const menu = (
    <Menu
      items={[
        {
          key: '1',
          label: (
            <a
              target="_self"
              rel="noopener noreferrer"
              href="http://127.0.0.1:5173"
            >
              返回首页
            </a>
          ),
        },
        {
          key: '2',
          label: (
            <a
              target="_self"
              rel="noopener noreferrer"
              href="http://127.0.0.1:5173/login"
            >
              退出登录
            </a>
          ),
        },
      ]}
    />
  )

  return (
    <div>
      <Layout>
        <Header
          style={{ backgroundColor: 'white', borderBottom: '1px solid #eee' }}
        >
          <div className={styles.logo}>光谷智慧交通管理系统</div>
          <div className={styles.userIcon}>
            <Dropdown overlay={menu}>
              <a>
                <Space>
                  超级管理员
                  <Avatar
                    style={{
                      backgroundColor: '#87d068',
                    }}
                    icon={<UserOutlined />}
                  />
                </Space>
              </a>
            </Dropdown>
          </div>
        </Header>
        <Layout>
          <Sider width={120} className={styles.siderbackground}>
            <Menu
              mode="inline"
              defaultSelectedKeys={['item-1']}
              defaultOpenKeys={['item-1']}
              onClick={onclick}
              style={{
                height: '100%',
                borderRight: 0,
              }}
              items={items}
            />
          </Sider>
          <Layout
            style={{
              padding: '0 24px 24px',
            }}
          >
            <Content
              className={styles.siderbackground}
              style={{
                padding: 24,
                margin: 0,
              }}
            >
              <Outlet></Outlet>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </div>
  )
}

export default Home
